<html>
<head>
    <title>用户管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F2F2F2;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .table {
            border: 1px solid #ddd;
            border-collapse: collapse;
        }

        .table thead tr th,
        .table tbody tr td {
            padding: 8px 12px;
            text-align: center;
            color: #333;
            border: 1px solid #ddd;
            border-collapse: collapse;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-main">
        <div class="main-head">
            <el-form :inline="true" size="small" :model="searchForm">
                <el-form-item label="配置点">
                    <el-input placeholder="请输入" style="width: 150px;" v-model="haveName"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="btnSearch">查询</el-button>
                    <el-button type="success" @click="btnAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table :data="tableData" height="500" :stripe="true" :border="true" size="mini" style="width: 100%">
            <el-table-column
                    type="index"
                    width="120" label="序号">
            </el-table-column>
            <el-table-column
                    prop="haveName"
                    label="配置点"
            >
            </el-table-column>
            <el-table-column
                    prop="riskName"
                    label="风险点"
            >
            </el-table-column>
            <el-table-column
                    prop="placeDescrib"
                    label="位置描述"
            >
            </el-table-column>
            <el-table-column
                    prop="materialList"
                    label="物资配备"
            >
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="责任人"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="操作"
                    width="180"
            >
                <template slot-scope="scope">
                    <el-button @click="btnEdit(scope.row)" round size="small"
                               icon="el-icon-edit"></el-button>
                    <el-button round icon="el-icon-delete" size="small"
                               @click="deleteClick(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-footer">
            <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                           :current-page.sync="pageno" @current-change="onChangePage">
            </el-pagination>
        </div>
    </div>
    <el-dialog :title="editMod?'编辑':'新增'" :visible.sync="addVisible" :show-close="false" width="55%"
               style="display: none">
        <el-form :model="addForm">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="配置点">
                        <el-input placeholder="请输入" style="width: 65%;" v-model="addForm.haveName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="关联风险点">
                        <el-select filterable style="width: 65%" v-model="addForm.riskNo">
                            <el-option
                                    v-for="item in RiskData"
                                    :key="item.riskNo"
                                    :label="item.riskName"
                                    :value="item.riskNo">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="负责人">
                        <el-select filterable style="width: 65%" v-model="addForm.manager">
                            <el-option
                                    v-for="item in userList"
                                    :key="item.Id"
                                    :label="item.userName"
                                    :value="item.Id" v-if="item.ParentId!=0">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="位置描述">
                <el-input placeholder="请输入" type="textarea" style="width: 80%;"
                          v-model="addForm.placeDescrib"></el-input>
            </el-form-item>
        </el-form>

        <el-divider content-position="right">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="addTypeContent">添加一行</el-button>
        </el-divider>
        <table width="100%" cellspacing="0" cellpadding="0" class="table" style="text-align: center">
            <tr>
                <th style="width:10%">序号</th>
                <th style="width:50%;color: red">物资名称</th>
                <th style="width: 10%">数量</th>
                <!--<th style="width: 10%">物资分类</th>-->
                <th style="width:10% ">操作</th>
            </tr>
            <tr v-for="(item,i) in materialContent">
                <td>
                    {{i+1}}
                </td>
                <td>
                    <el-select filterable style="width: 100%" v-model="item.materialId">
                        <el-option
                                v-for="item in materialData"
                                :key="item.materialId"
                                :label="item.materialName"
                                :value="item.materialId">
                        </el-option>
                    </el-select>
                </td>
                <td>
                    <el-input v-model="item.Number" type="number"/>
                </td>
                <!--<td>-->

                <!--</td>-->
                <td>
                    <el-button @click="delmaterialContent(i)" type="warning" size="mini">删除</el-button>
                </td>

            </tr>
        </table>
        <span slot="footer" class="dialog-footer">
                    <el-button style="text-align: center" @click="addCancel()">取消</el-button>
                    <el-button type="primary" @click="addSubmit()"
                               style="text-align: center">确定</el-button>
            </span>
    </el-dialog>

</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>


<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            searchForm: {},
            tableData: [],
            pagesize: 10,
            pageno: 1,
            totalCount: 10,
            addVisible: false,
            addForm: {},
            TypeContent: [],
            options: [],
            RiskData: [],
            materialData: [],
            materialContent: [],
            editMod: false,
            MaterialHaveData: [],
            haveName: '' ,
            userList:[]
        },
        methods: {
            deleteClick(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    HttpUtil.get('EmergenceSupplies/MaterialHaveDelete', {haveId: row.haveId}).success((res) => {
                        if (res.state == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getMaterialHaveList();
                        }
                        else {
                            this.$message({
                                type: 'info',
                                message: res.errMsg
                            });
                        }

                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            btnEdit(row) {
                var rows = this.hisData;
                this.materialContent = [];
                this.addForm = Object.assign({}, row);
                // this.addForm = row;
                for (var i = 0; i < rows.length; i++) {
                    if (row.haveId == rows[i].haveId) {
                        this.materialContent = rows[i].data;
                    }
                }
                this.addVisible = true;
                this.editMod = true;
            },
            addSubmit() {
                console.log(this.TypeContent)
                let param = {};
                if (!this.addForm.haveName) {
                    this.$message.error('配置点名称不能为空!');
                    return;
                }
                if (!this.addForm.riskNo) {
                    this.$message.error('风险点不能为空!');
                    return;
                }
                if (!this.addForm.manager) {
                    this.$message.error('负责人不能为空!');
                    return;
                }

                if (!this.addForm.placeDescrib) {
                    this.$message.error('位置描述不能为空!');
                    return;
                }
                if (this.materialContent.length == 0) {
                    this.$message.warning('至少有一项风险内容');
                    return;
                }


                param.haveName = this.addForm.haveName;
                param.riskNo = this.addForm.riskNo;
                param.manager = this.addForm.manager;
                param.placeDescrib = this.addForm.placeDescrib;
                param.materialData = JSON.stringify(this.materialContent);
                if (this.editMod) {
                    param.haveId = this.addForm.haveId;
                    HttpUtil.get('EmergenceSupplies/MaterialHaveUpdate', param).success((r) => {
                        this.addCancel();
                        this.getMaterialHaveList();
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                    })
                } else {
                    param.projectNo = SiteConfig.account.projectNo;
                    HttpUtil.get('EmergenceSupplies/MaterialHaveAdd', param).success((r) => {
                        this.addCancel();
                        this.getMaterialHaveList();
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                    })
                }
            },
            addTypeContent() {
                this.materialContent.push({materialId: '', Number: 0});
            },
            getMaterialList() {
                var param = {};
                if (this.materialName)
                    param.materialName = this.materialName;
                param.pageno = 1;
                param.pagesize = 1000;
                param.projectNo = SiteConfig.account.projectNo;
                HttpUtil.get('EmergenceSupplies/EmergenceManageList', param).success((r) => {
                    if (r.state == 0) {
                        vuePage.materialData = r.data;
                        // vuePage.totalCount = r.total;
                    } else {
                        vuePage.$message.warning('错误' + r.errMsg)
                    }
                })
            },
            getMaterialHaveList() {
                var param = {};
                if (this.haveName)
                    param.haveName = this.haveName;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                param.projectNo = SiteConfig.account.projectNo;
                HttpUtil.get('EmergenceSupplies/MaterialHaveList', param).success((r) => {
                    if (r.state == 0) {
                        this.hisData = r.data;
                        this.tableData = [];
                        var row = r.data;
                        var str = "";
                        for (var i = 0; i < row.length; i++) {
                            str = "";
                            for (var j = 0; j < row[i].data.length; j++) {
                                str += row[i].data[j].materialName + ',';
                            }
                            str = str.substr(0, str.length - 1);

                            this.tableData.push({
                                haveId: row[i].haveId,
                                haveName: row[i].data[0].haveName,
                                riskName: row[i].data[0].riskName,
                                userName: row[i].data[0].userName,
                                riskNo: row[i].data[0].riskNo,
                                manager: row[i].data[0].manager,
                                placeDescrib: row[i].data[0].placeDescrib,
                                materialList: str
                            })
                        }
                        vuePage.totalCount = r.total;
                    } else {
                        vuePage.$message.warning('错误' + r.errMsg)
                    }
                })
            },
            btnSearch() {
                this.getMaterialHaveList();
            },
            addCancel() {
                this.addVisible = false;
                this.addForm = {};
            },
            btnAdd() {
                this.materialContent = [];
                this.addVisible = true;
                this.editMod = false;
            },
            delTypeContent(index) {
                this.TypeContent.splice(index, 1);
            },
            delmaterialContent(index) {
                this.materialContent.splice(index, 1);
            },
            // addTypeContent() {
            //     this.TypeContent.push({content: ''});
            // },
            // onChangePage(page) {
            //
            // },
            onChangePage(page) {
                this.pageno = page;
                this.getMaterialHaveList();
            },
        },
        created: function () {
            $('.page').show();
            let proNo = HttpUtil.getQueryString('projectNo');
            if (proNo) SiteConfig.account.projectNo = proNo;
            let id = HttpUtil.getQueryString('id');
            if (id) SiteConfig.account.id = id;
        },
        mounted: function () {
            this.getMaterialList();
            this.getMaterialHaveList();
            let param = {};
            param.projectNo = SiteConfig.account.projectNo;
            param.pageno = 1;
            param.pagesize = 1000;
            HttpUtil.get('Risk/List', param).success((res) => {
                this.RiskData = res.data;
            });
            HttpUtil.get('User/Child', {parentId: SiteConfig.account.id}).success((r) => {
                for (let i in r.data) {
                    if (r.data[i].attributes.departmentName != null)
                        r.data[i].userName = r.data[i].attributes.departmentName + '-' + r.data[i].userName;

                    if (r.data[i].attributes.titlegrade != null)
                        r.data[i].Text =
                            (r.data[i].attributes.titlegrade == 0 ? '公司级'
                                : r.data[i].attributes.titlegrade == 1 ? '分管领导级'
                                    : r.data[i].attributes.titlegrade == 2 ? '部门级'
                                        : r.data[i].attributes.titlegrade == 3 ? '车间级'
                                            : r.data[i].attributes.titlegrade == 4 ? '班组级'
                                                : r.data[i].attributes.titlegrade == 5 ? '岗位级' : '')
                            + '-' + r.data[i].userName;
                }
                this.userList = r.data;
            });
        }
    });


</script>

</body>
</html>
